<template>
  <el-dialog :title="setting.title"
             :visible="setting.dialogVisible"
             custom-class="trace-centen-dailog"
             append-to-body
             :close-on-click-modal="false"
             @close="onClose">
    <el-form :model="info"
             size="small"
             label-width="85px"
             ref="monthPlan"
             :rules="rules">
      <el-form-item label="更新人员"
                    prop="upPersonnel">
        <el-input v-model="info.upPersonnel"></el-input>
      </el-form-item>
      <el-form-item label="计划月份"
                    prop="planMonth">
        <el-date-picker v-model="info.planMonth"
                        popper-class="date-picker"
                        :picker-options="pickerOptions"
                        type="month">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="info"
                 size="mini"
                 @click="onClose">取 消</el-button>
      <el-button type="primary"
                 size="mini"
                 @click="onChange">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { addPlanProcess, voidPlanProcess } from '@/api/maintenance'
import Bus from '@/utils/bus'
import Moment from 'moment'
export default {
  props: {
    contractId: {
      type: String
    },
    maturity: {
      type: String
    }
  },
  data() {
    return {
      setting: {
        loadding: false,
        mode: 1,
        dialogVisible: false,
        title: '新增月份计划'
      },
      info: {
        id: '',
        contractId: '',
        planMonth: '',
        upPersonnel: '',
        projectMaturity: ''
      },
      rules: {
        planMonth: [
          { required: true, message: '请选择计划时间!', trigger: 'blur' }
        ],
        upPersonnel: [
          { required: true, message: '请输入跟进人员!', trigger: 'blur' }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          let nowday = Moment().format('YYYY-MM-DD')
          if (nowday > Moment(nowday).format('YYYY-MM') + '-02') {
            return time.getTime() <= Moment().add(1, 'months')
          } else {
            return time.getTime() <= Moment()
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted() {
    Bus.$on('open-month-plan', (mode, row) => {
      this.setting.mode = mode
      if (row !== null) {
        this.info = {
          id: row.id,
          contractId: this.contractId,
          planMonth: row.planMonth,
          upPersonnel: this.userInfo.name,
          projectMaturity: this.maturity
        }
      } else {
        this.info = {
          id: -1,
          contractId: this.contractId,
          planMonth: null,
          upPersonnel: this.userInfo.name,
          projectMaturity: this.maturity
        }
      }
      this.setting.dialogVisible = true
    })
  },
  methods: {
    onClose() {
      this.$refs.monthPlan.resetFields()
      this.setting.dialogVisible = false
      this.$emit('close')
    },
    onChange() {
      this.$refs.monthPlan.validate(valid => {
        if (valid) {
          if (this.setting.mode === 1) {
            this.voidPlanProcess()
          } else {
            this.addPlanProcess()
          }
        }
      }
      )
    },
    // 验证是否存在
    voidPlanProcess() {
      voidPlanProcess({
        contractId: this.info.contractId,
        planMonth: Moment(this.info.planMonth).format('YYYY-MM-DD')
      }).then(res => {
        if (res.data.success) {
          const result = res.data.data
          if (!result) {
            this.addPlanProcess()
          } else {
            this.$message({
              message: '月份计划已存在!',
              type: 'error',
              duration: 5 * 1000
            })
          }
        }
      })
    },
    // 新增跟进记录
    addPlanProcess() {
      if (this.info.planMonth !== null) this.info.planMonth = Moment(this.info.planMonth).format('YYYY-MM-DD')
      addPlanProcess(this.info).then(res => {
        if (res.data.success) {
          const result = res.data.data
          if (result) {
            this.$message({
              message: '新增月份计划成功!',
              type: 'success',
              duration: 5 * 1000
            })
            this.onClose()
          } else {
            this.$message({
              message: result.Message,
              type: 'error',
              duration: 5 * 1000
            })
          }
        }
      })
    },
    // 打开dailog回调
    onOpenCallback() {
      if (this.setting.mode === 1) {
        this.setting.title = '新增月份计划'
        // 修复点击编辑后，点击添加的数据清除
        this.$refs.monthPlan.infoForm = {}
      }
      if (this.setting.mode === 2) {
        this.setting.title = '编辑月份计划'
      }
    }
  }
}
</script>
